<template>
  <div>
    <!-- <div class="margin-top">
      <div class="f18">验证表单 - 通过设置form的宽度，来限制整个表单的宽度</div>
      <el-form
        :model="searchForm"
        :rules="rules"
        ref="searchForm"
        label-width="100px"
        style="width: 500px"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="searchForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="searchForm.date1"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                placeholder="选择时间"
                v-model="searchForm.date2"
                style="width: 100%;"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="searchForm.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="searchForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="searchForm.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea" v-model="searchForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('searchForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="padding">
      <add-button
        @click.native="$router.push({ path: '/fuel/add/' })"
      ></add-button>
    </div> -->
    <SearchForm
      :searchForm="initParam"
      :searchFormTemp="searchFormTemp"
      @normalSearch="normalSearch"
      @normalResetQuery="normalResetQuery"
    ></SearchForm>
    <el-table
      :data="dataList"
      default-expand-all
      style="width: 100%"
      row-key="id"
      :tree-props="{ children: 'child' }"
      :indent="30"
      v-if="dataList.length > 0"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="类型" prop="fuel.name"></el-table-column>
      <el-table-column label="年份" prop="year"></el-table-column>
      <el-table-column label="数量" prop="quantity"></el-table-column>
      <el-table-column align="right" width="250">
        <template slot-scope="scope">
          <edit-button
            @click.native="$router.push({ path: '/fuel/edit/' + scope.row.id })"
          ></edit-button>
          <del-button @click.native="del(scope.row.id)"></del-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center padding-top-bottom-20" v-if="dataList.length > 0">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="pageSize"
        :current-page.sync="page"
        :total="totalCount"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SearchForm from "@/components/common/SearchForm";
export default {
  name: "Fuel",
  components: { SearchForm },
  data() {
    return {
      page: 1,
      pageSize: 10,
      totalCount: 200,
      content: "",
      dataList: [],
      searchForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      initParam: {
        pageNum: 1,
        pageSize: 10,
        param: {
          type: "",
          year: ""
        },
        sort: ""
      },
      searchFormTemp: [
        {
          lable: "类型",
          name: "type",
          type: "select"
        },
        {
          lable: "年份",
          name: "year",
          type: "datePicker"
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      let _this = this;
      this.$http.httpPost({
        url: "/api/truck/fuelrecord",
        datas: this.searchForm,
        success(res) {
          console.log(res);
          _this.dataList = res.data ? res.data : [];
          _this.page = res.current_page;
          _this.totalCount = res.total;
        }
      });
    },
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    del(id) {
      let _this = this;
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http.httpPost({
            url: "/api/truck/fuelrecord/delete",
            datas: { id: id },
            success(res) {
              _this.$utils.message("删除成功！");
              _this.getList();
            }
          });
        })
        .catch(() => {
          // _this.$utils.warning('取消了');
        });
    },
    normalSearch() {},
    normalResetQuery() {}
  }
};
</script>
